<template>
  <div class="yun-page">
    <div class="yun-card card1">
      <div class="yun-cardview yun-card1">
        <h3 class="yun-title"><span>—</span> About Polkamarkets Token ($POLK) <span>—</span></h3>
        <p class="yun-sbtitle">
          Polkamarkets utility token is used for mining, liquidity providing,
          fees collection and yield farming.
        </p>
      </div>
    </div>
    <div class="yun-card card2">
      <div class="yun-abcard">
        <div class="yun-item" v-for="(item, index) in moneyList" :key="index">
          <div class="yun-num">{{ item.num }}</div>
          <div class="yun-title">{{ item.title }}</div>
        </div>
      </div>
    </div>
    <div class="yun-card card3">
      <div class="yun-points">
        <img src="@/assets/img/points.png" alt="" />
      </div>
      <div class="yun-cardview yun-card3">
        <div class="yun-title" v-if='creenWidth>500'>Funds Allocation</div>
        <div class="yun-cont">
          <div class="yun-left">
            <img src="@/assets/img/token/chart1.png" alt="" />
          </div>
          <div class="yun-title" v-if='creenWidth<500'>Funds Allocation</div>
          <div class="yun-right">
            <p>Strategic Sale price: $0.025 USD</p>
            <p>Public Sale price: $0.03 USD</p>
            <p>Uniswap listing price: $0.05 USD</p>
            <p>
              Strategic and public sales with 28% of the total token
              distribution
            </p>
            <p>
              Marketing reserved for awareness, partnerships and exchange
              listings
            </p>
            <p>
              Liquidity Fund will provide funds for Uniswap and other exchanges
              liquidity
            </p>
            <p>
              Team and Advisors with 10% of the total token distribution,
              Foundational Reserve with the remaining 20%
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="yun-card card4">
      <div class="yun-cardview yun-card4">
        <h3 class="yun-title">The Solution</h3>
        <div class="yun-cont">
          <div class="yun-left">
            <p>
              Strategic: 25% on TGE, then 25% monthly over the next 3 months
            </p>
            <p>Public: Fully unlocked</p>
            <p>Liquidity: 10% on TGE, 10% per month over 9 months</p>
            <p>Marketing: 10% on TGE, 5% per month over 18 months</p>
            <p>
              Team & Foundational tokens: 1 year fully locked, then 25%
              quarterly
            </p>
          </div>
          <div class="yun-right">
            <img src="@/assets/img/token/chart2.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="yun-card card5">
      <div class="yun-points">
        <img src="@/assets/img/points.png" alt="" />
      </div>
      <div class="yun-cardview yun-card5">
        <div class="yun-title" v-if='creenWidth>500'>Token Distribution</div>
        <div class="yun-cont">
          <div class="yun-left">
            <img src="@/assets/img/token/chart3.png" alt="" />
          </div>
          <div class="yun-title" v-if='creenWidth<500'>Token Distribution</div>
         <div class="yun-right">
            <p>45% of the funds will be used to support the developer team</p>

<p>Marketing actions such as partnerships, awareness and go-to market strategy will account for 20% of the total funds raised (Ecosystem Growth)</p>

<p>Legal and Accountancy will represent 5% of the total funds raised</p>

<p>30% of funds will be used to provide liquidity to Uniswap and other exchanges</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Home",
  components: {},
  data() {
    return {
      moneyList: [
        {
          num: "100M",
          title: "Total Supply",
        },
        {
          num: "$672k",
          title: "Initial Market Cap",
        },
        {
          num: "$715k",
          title: "Total Raise",
        },
        {
          num: "$200k",
          title: "Initial Uniswap Liquidity",
        },
      ],
      creenWidth: document.body.clientWidth,
    };
  },
};
</script>
<style lang='scss' scoped>
.yun-page {
  max-width: 1920px;
  margin: 0 auto;
  .yun-card {
    width: 100%;
    position: relative;
    &.card1 {
      width: 100%;
      height: 720px;
      background-image: url("~@/assets/img/token/bg1.png");
      background-size: 100% 100%;
    }
    &.card2 {
      width: 100%;
      height: 540px;
      background-image: url("~@/assets/img/token/bg2.png");
      background-size: 100% 100%;
    }

    &.card3 {
      width: 100%;
      height: 840px;
      background-image: url("~@/assets/img/token/bg3.png");
      background-size: 100% 100%;
      .yun-points {
        position: absolute;
        top: 30px;
        right: 20px;
      }
    }
    &.card4 {
      width: 100%;
      height: 876px;
      background-image: url("~@/assets/img/token/bg4.png");
      background-size: 100% 100%;
    }
    &.card5 {
      width: 100%;
      height: 840px;
      background-image: url("~@/assets/img/token/bg5.png");
      background-size: 100% 100%;
      .yun-points {
        position: absolute;
        bottom: 30px;
        right: 20px;
      }
    }
    .yun-abcard {
      width: 1225px;
      height: 529px;
      background: #ffffff;
      box-shadow: 0px 28px 68px 0px rgba(15, 23, 115, 0.15);
      border-radius: 10px;
      margin: 0 auto;
      position: relative;
      top: -117px;
      padding: 30px 110px 80px;
      .yun-item {
        width: 100%;
        display: flex;
        justify-content: space-between;
        .yun-num {
          font-size: 48px;
          font-family: Pill Alt 600mg;
          font-weight: 400;
          color: #f0980e;
          line-height: 107px;
        }
        .yun-title {
          font-size: 36px;
          font-family: Pill Alt 600mg;
          font-weight: 400;
          color: #31313b;
          line-height: 107px;
        }
      }
    }
    .yun-cardview {
      width: 1365px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      &.yun-card1 {
        padding-top: 0px;
        .yun-title {
          font-size: 36px;
          font-family: Pill Alt;
          font-weight: bold;
          color: #31313b;
          line-height: 72px;
          text-align: center;
        }
        .yun-sbtitle {
          margin-top: 30px;
          font-size: 33px;
          font-family: Pill Alt;
          font-weight: 400;
          color: #828282;
          line-height: 48px;
          text-align: center;
        }
        .yun-btn {
          width: 222px;
          height: 69px;
          border: 2px solid #404fe0;
          border-radius: 8px;
          margin: 100px auto;
          font-size: 24px;
          font-family: Pill Alt 600mg;
          font-weight: 500;
          color: #404fe0;
          text-align: center;
          line-height: 69px;
          cursor: pointer;
        }
      }
      &.yun-card3 {
        .yun-title {
          font-size: 72px;
          font-family: Pill Alt 600mg;
          font-weight: 500;
          color: #31313b;
          line-height: 48px;
          text-align: center;
        }
        .yun-cont {
          display: flex;
          justify-content: space-between;
          margin-top: 64px;
          .yun-left {
            width: 703px;
            img {
              width: 100%;
            }
          }
          .yun-right {
            width: 620px;
            font-size: 28px;
            font-family: Pill Alt 600mg;
            font-weight: 300;
            color: #828282;
            line-height: 29px;
            p {
              margin-bottom: 20px;
            }
          }
        }
      }
      &.yun-card4 {
        .yun-title {
          font-size: 72px;
          font-family: Pill Alt;
          font-weight: 500;
          color: #fff;
          line-height: 48px;
          text-align: center;
        }
        .yun-cont {
          display: flex;
          justify-content: space-between;
          margin-top: 64px;
          padding: 60px 40px;
          background: #4660c1;
          border-radius: 10px;
          .yun-left {
            width: 510px;
            font-size: 28px;
            font-family: Pill Alt 600mg;
            font-weight: 300;
            color: #ffffff;
            line-height: 29px;
            p {
              margin-bottom: 20px;
            }
          }
          .yun-right {
            width: 745px;
            img {
              width: 100%;
            }
          }
        }
      }
      &.yun-card5 {
        .yun-title {
          font-size: 72px;
          font-family: Pill Alt 600mg;
          font-weight: 500;
          color: #31313b;
          line-height: 48px;
          text-align: center;
        }
        .yun-cont {
          display: flex;
          justify-content: space-between;
          margin-top: 64px;
          .yun-left {
            width: 703px;
            img {
              width: 100%;
            }
          }
          .yun-right {
            width: 620px;
            font-size: 28px;
            font-family: Pill Alt 600mg;
            font-weight: 300;
            color: #828282;
            line-height: 29px;
            p {
              margin-bottom: 20px;
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width: 480px) {
  .yun-page {
    max-width: 1920px;
    width:100%;
    margin: 0 auto;
    .yun-card {
      width: 100%;
      position: relative;
      &.card1 {
        width: 100%;
        height: 741px;
        background-image: url("~@/assets/img/app/token/bg1.png");
        background-size: 100% 100%;
      }
      &.card2 {
        width: 100%;
        height: 860px;
        background-image: url("~@/assets/img/app/token/bg2.png");
        background-size: 100% 100%;
      }

      &.card3 {
        width: 100%;
        height: 1439px;
        background-image: url("~@/assets/img/app/token/bg3.png");
        background-size: 100% 100%;
        .yun-points {
          position: absolute;
          top: 30px;
          right: 20px;
          width:8rem;
          img{
            width:100%;
          }
        }
      }
      &.card4 {
        width: 100%;
        height: 1317.7px;
        background-image: url("~@/assets/img/app/token/bg4.png");
        background-size: 100% 100%;
      }
      &.card5 {
        width: 100%;
        height: 1232.5px;
        background-image: url("~@/assets/img/app/token/bg5.png");
        background-size: 100% 100%;
        .yun-points {
          position: absolute;
          bottom: 30px;
          right: 20px;
          width:8rem;
          img{
            width:100%;
          }
        }
      }
      .yun-abcard {
        width: 90%;
        height: auto;
        background: #ffffff;
        box-shadow: 0px 28px 68px 0px rgba(15, 23, 115, 0.15);
        border-radius: 10px;
        margin: 0 auto;
        position: relative;
        top: -60px;
        padding: 40px 30px;
        .yun-item {
          width: 100%;
          display: block;
          justify-content: space-between;
          .yun-num {
            font-size: 36px;
            font-family: Pill Alt 600mg;
            font-weight: 400;
            color: #f0980e;
            line-height: 90px;
            text-align: center;
            width:100%;
          }
          .yun-title {
            font-size: 26px;
            font-family: Pill Alt 600mg;
            font-weight: 400;
            color: #31313b;
            line-height: 90px;
            text-align: center;
            width:100%;
          }
        }
      }
      .yun-cardview {
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        &.yun-card1 {
          padding-top: 0px;
          .yun-title {
            font-size: 30px;
            font-family: Pill Alt;
            font-weight: bold;
            color: #31313b;
            line-height: 48px;
            text-align: center;
            display: flex;
            padding:0 15px;
            align-items: center;
          }
          .yun-sbtitle {
            margin-top: 30px;
            font-size: 24px;
            font-family: Pill Alt;
            font-weight: 400;
            color: #828282;
            line-height: 48px;
            text-align: center;
            padding:0 15px;
          }
        }
        &.yun-card3 {
          .yun-title {
            font-size: 48px;
            font-family: Pill Alt 600mg;
            font-weight: 500;
            color: #31313b;
            line-height: 48px;
            text-align: center;
          }
          .yun-cont {
            display: block;
            justify-content: space-between;
            margin-top: 64px;
            .yun-left {
              width: 100%;
              padding:0 15px;
              img {
                width: 100%;
              }
            }
            .yun-title{
                margin:40px 0;
              }
            .yun-right {
              width: 100%;
              padding:0 15px;
              font-size: 28px;
              font-family: Pill Alt 600mg;
              font-weight: 300;
              color: #828282;
              line-height: 32px;
              p {
                margin-bottom: 20px;
              }
              
            }
          }
        }
        &.yun-card4 {
          width:90%;
          .yun-title {
            font-size: 48px;
            font-family: Pill Alt;
            font-weight: 500;
            color: #fff;
            line-height: 48px;
            text-align: center;
          }
          .yun-cont {
            display: block;
            justify-content: space-between;
            margin-top: 64px;
            padding: 30px 20px;
            background: #4660c1;
            border-radius: 10px;
            .yun-left {
              width: 100%;
              font-size: 28px;
              font-family: Pill Alt 600mg;
              font-weight: 300;
              color: #ffffff;
              line-height: 36px;
              p {
                margin-bottom: 20px;
              }
            }
            .yun-right {
              width: 100%;
              img {
                width: 100%;
              }
            }
          }
        }
        &.yun-card5 {
          .yun-title {
            font-size: 48px;
            font-family: Pill Alt 600mg;
            font-weight: 500;
            color: #31313b;
            line-height: 48px;
            text-align: center;
          }
          .yun-cont {
            display: block;
            justify-content: space-between;
            margin-top: 64px;
            .yun-left {
              width: 100%;
              padding:0 15px;
              img {
                width: 100%;
              }
            }
            .yun-title{
                margin:40px 0;
              }
            .yun-right {
              width: 100%;
              padding:0 15px;
              font-size: 28px;
              font-family: Pill Alt 600mg;
              font-weight: 300;
              color: #828282;
              line-height: 32px;
              p {
                margin-bottom: 20px;
              }
              
            }
          }
        }
      }
    }
  }
}
</style>
